<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鱼情 - 钓鱼助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
      body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      .glass-effect {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      }
      .map-bg {
        background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop');
        background-size: cover;
        background-position: center;
        position: relative;
      }
      .map-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
      }
      .fishing-index {
        background: linear-gradient(45deg, #4ade80, #22c55e);
      }
      .fishing-index.excellent { background: linear-gradient(45deg, #10b981, #059669); }
      .fishing-index.good { background: linear-gradient(45deg, #3b82f6, #1d4ed8); }
      .fishing-index.poor { background: linear-gradient(45deg, #ef4444, #dc2626); }
    </style>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body class="min-h-screen">
    <!-- 顶部状态栏 -->
    <div class="fixed top-0 left-0 right-0 z-50 glass-effect">
      <div class="flex items-center justify-between p-4">
        <div class="flex items-center space-x-2 text-white">
          <i class="fas fa-map-marker-alt text-blue-300"></i>
          <span class="text-sm font-medium" id="current-location">杭州西湖</span>
          <button onclick="switchLocation()" class="text-xs opacity-70">
            <i class="fas fa-sync-alt"></i>
          </button>
        </div>
        <div class="text-white text-sm font-medium">
          <span id="current-time">12:30</span>
        </div>
        <div class="flex items-center space-x-2">
          <i class="fas fa-wifi text-white"></i>
          <i class="fas fa-battery-three-quarters text-white"></i>
          <button onclick="openSettings()" class="text-white">
            <i class="fas fa-cog"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 地图背景容器 -->
    <div class="map-bg min-h-screen pt-20 pb-24 relative">
      <!-- 天气信息卡片 -->
      <div class="absolute top-24 left-4 right-4 z-10">
        <div class="glass-effect rounded-2xl p-4 text-white">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center space-x-3">
              <i class="fas fa-sun text-yellow-300 text-2xl" id="weather-icon"></i>
              <div>
                <div class="text-2xl font-bold" id="temperature">25°C</div>
                <div class="text-sm opacity-80" id="weather-desc">晴朗</div>
              </div>
            </div>
            <div class="text-right">
              <div class="flex items-center space-x-4 text-sm">
                <div class="flex items-center space-x-1">
                  <i class="fas fa-wind"></i>
                  <span id="wind-speed">3级</span>
                </div>
                <div class="flex items-center space-x-1">
                  <i class="fas fa-tachometer-alt"></i>
                  <span id="pressure">1013hPa</span>
                </div>
              </div>
              <div class="mt-1 text-xs opacity-80">
                <i class="fas fa-water"></i> <span id="tide-info">涨潮 14:30</span>
              </div>
            </div>
          </div>
          
          <!-- 新增环境数据 -->
          <div class="grid grid-cols-4 gap-3 mt-3 pt-3 border-t border-white/20">
            <div class="text-center">
              <div class="text-xs opacity-70">湿度</div>
              <div class="text-sm font-medium" id="humidity">65%</div>
            </div>
            <div class="text-center">
              <div class="text-xs opacity-70">能见度</div>
              <div class="text-sm font-medium" id="visibility">15km</div>
            </div>
            <div class="text-center">
              <div class="text-xs opacity-70">紫外线</div>
              <div class="text-sm font-medium" id="uv-index">中等</div>
            </div>
            <div class="text-center">
              <div class="text-xs opacity-70">水温</div>
              <div class="text-sm font-medium" id="water-temp">18°C</div>
            </div>
          </div>
          
          <!-- 钓鱼指数 -->
          <div class="mt-3 pt-3 border-t border-white/20">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-2">
                <span class="text-sm">钓鱼指数</span>
                <button onclick="showFishingIndexInfo()" class="text-xs opacity-70">
                  <i class="fas fa-info-circle"></i>
                </button>
              </div>
              <div class="fishing-index excellent px-3 py-1 rounded-full text-xs font-medium">
                <i class="fas fa-star mr-1"></i>极佳
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 钓点标记（增强功能） -->
      <div class="absolute top-1/3 left-1/4" onclick="showSpotInfo(1)">
        <div class="w-8 h-8 bg-red-500 rounded-full border-2 border-white shadow-lg pulse flex items-center justify-center cursor-pointer">
          <i class="fas fa-fish text-white text-xs"></i>
        </div>
        <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-red-500 text-white text-xs px-2 py-1 rounded">
          西湖1号点
        </div>
      </div>
      <div class="absolute top-1/2 right-1/3" onclick="showSpotInfo(2)">
        <div class="w-8 h-8 bg-blue-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center cursor-pointer">
          <i class="fas fa-fish text-white text-xs"></i>
        </div>
        <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs px-2 py-1 rounded">
          东岸钓台
        </div>
      </div>
      <div class="absolute bottom-1/3 left-1/2" onclick="showSpotInfo(3)">
        <div class="w-8 h-8 bg-green-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center cursor-pointer">
          <i class="fas fa-fish text-white text-xs"></i>
        </div>
        <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-green-500 text-white text-xs px-2 py-1 rounded">
          深水区
        </div>
      </div>

      <!-- 地图控制按钮组 -->
      <div class="absolute top-1/2 right-4 space-y-2">
        <button onclick="zoomIn()" class="w-10 h-10 glass-effect rounded-lg text-white flex items-center justify-center">
          <i class="fas fa-plus"></i>
        </button>
        <button onclick="zoomOut()" class="w-10 h-10 glass-effect rounded-lg text-white flex items-center justify-center">
          <i class="fas fa-minus"></i>
        </button>
        <button onclick="centerMap()" class="w-10 h-10 glass-effect rounded-lg text-white flex items-center justify-center">
          <i class="fas fa-crosshairs"></i>
        </button>
        <button onclick="toggleMapLayer()" class="w-10 h-10 glass-effect rounded-lg text-white flex items-center justify-center">
          <i class="fas fa-layer-group"></i>
        </button>
      </div>

      <!-- 添加标点按钮 -->
      <div class="absolute bottom-32 right-4">
        <button onclick="addNewSpot()" class="w-14 h-14 bg-blue-500 rounded-full shadow-lg text-white card-hover">
          <i class="fas fa-plus text-xl"></i>
        </button>
      </div>

      <!-- 今日推荐钓点 -->
      <div class="absolute bottom-48 left-4 right-16">
        <div class="glass-effect rounded-xl p-3 text-white">
          <div class="flex items-center space-x-2 mb-2">
            <i class="fas fa-star text-yellow-300"></i>
            <span class="text-sm font-medium">今日推荐</span>
          </div>
          <div class="text-xs opacity-80">基于天气和历史数据，推荐西湖1号点，成功率92%</div>
          <button onclick="navigateToSpot(1)" class="mt-2 text-xs text-blue-300">
            <i class="fas fa-directions mr-1"></i>导航前往
          </button>
        </div>
      </div>
    </div>

    <!-- 底部导航和功能模块 -->
    <div class="fixed bottom-0 left-0 right-0 z-50">
      <!-- 主要功能模块 -->
      <div class="glass-effect mx-4 mb-4 rounded-2xl p-4">
        <div class="grid grid-cols-2 gap-4">
          <!-- 日志与识别 -->
          <a href="fishing-log.html" class="block">
            <div class="glass-effect rounded-xl p-4 text-center card-hover text-white">
              <i class="fas fa-book text-3xl mb-2 text-green-300"></i>
              <div class="font-medium">钓鱼日志</div>
              <div class="text-xs opacity-80 mt-1">记录与识别</div>
            </div>
          </a>
          
          <!-- 社区 -->
          <a href="community.html" class="block">
            <div class="glass-effect rounded-xl p-4 text-center card-hover text-white">
              <i class="fas fa-users text-3xl mb-2 text-orange-300"></i>
              <div class="font-medium">钓友社区</div>
              <div class="text-xs opacity-80 mt-1">分享与交流</div>
            </div>
          </a>

          <!-- 鱼种识别 -->
          <a href="fish-recognition.html" class="block">
            <div class="glass-effect rounded-xl p-4 text-center card-hover text-white">
              <i class="fas fa-camera text-3xl mb-2 text-purple-300"></i>
              <div class="font-medium">鱼种识别</div>
              <div class="text-xs opacity-80 mt-1">拍照识别</div>
            </div>
          </a>

          <!-- 历史记录 -->
          <a href="history.html" class="block">
            <div class="glass-effect rounded-xl p-4 text-center card-hover text-white">
              <i class="fas fa-chart-line text-3xl mb-2 text-blue-300"></i>
              <div class="font-medium">历史记录</div>
              <div class="text-xs opacity-80 mt-1">数据分析</div>
            </div>
          </a>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="bg-white/90 backdrop-blur-lg border-t border-gray-200">
        <div class="flex items-center justify-around p-2">
          <button class="flex flex-col items-center p-2 text-blue-500">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
          </button>
          <button onclick="openMapPage()" class="flex flex-col items-center p-2 text-gray-400">
            <i class="fas fa-map text-xl"></i>
            <span class="text-xs mt-1">地图</span>
          </button>
          <a href="fishing-log.html" class="flex flex-col items-center p-2 text-gray-400">
            <i class="fas fa-plus-circle text-2xl"></i>
            <span class="text-xs">记录</span>
          </a>
          <button onclick="openNotifications()" class="flex flex-col items-center p-2 text-gray-400">
            <i class="fas fa-bell text-xl"></i>
            <span class="text-xs mt-1">通知</span>
          </button>
          <button onclick="openProfile()" class="flex flex-col items-center p-2 text-gray-400">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 钓点信息模态框 -->
    <div id="spotModal" class="fixed inset-0 z-50 hidden">
      <div class="absolute inset-0 bg-black/50" onclick="closeSpotModal()"></div>
      <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 max-h-[70vh] overflow-y-auto">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-semibold" id="spot-name">钓点信息</h3>
          <button onclick="closeSpotModal()" class="text-gray-400 text-xl">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div id="spot-content">
          <!-- 动态内容 -->
        </div>
        
        <div class="flex space-x-3 mt-6">
          <button onclick="navigateToSpot()" class="flex-1 py-3 bg-blue-500 text-white rounded-lg">
            <i class="fas fa-directions mr-2"></i>导航前往
          </button>
          <button onclick="editSpot()" class="flex-1 py-3 border border-gray-300 rounded-lg">
            <i class="fas fa-edit mr-2"></i>编辑信息
          </button>
        </div>
      </div>
    </div>

    <!-- 添加钓点模态框 -->
    <div id="addSpotModal" class="fixed inset-0 z-50 hidden">
      <div class="absolute inset-0 bg-black/50" onclick="closeAddSpotModal()"></div>
      <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 max-h-[80vh] overflow-y-auto">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-xl font-semibold">添加钓点</h3>
          <button onclick="closeAddSpotModal()" class="text-gray-400 text-xl">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <form class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">钓点名称</label>
            <input type="text" placeholder="输入钓点名称" class="w-full p-3 border border-gray-300 rounded-lg">
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">钓点类型</label>
            <select class="w-full p-3 border border-gray-300 rounded-lg">
              <option>选择钓点类型</option>
              <option>湖泊</option>
              <option>河流</option>
              <option>海边</option>
              <option>池塘</option>
              <option>水库</option>
            </select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">常见鱼种</label>
            <input type="text" placeholder="如：鲫鱼、草鱼、鲤鱼" class="w-full p-3 border border-gray-300 rounded-lg">
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">水深(米)</label>
              <input type="number" step="0.1" placeholder="1.5" class="w-full p-3 border border-gray-300 rounded-lg">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">难度等级</label>
              <select class="w-full p-3 border border-gray-300 rounded-lg">
                <option>简单</option>
                <option>中等</option>
                <option>困难</option>
              </select>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">钓点描述</label>
            <textarea placeholder="描述钓点环境、特点等..." rows="3" class="w-full p-3 border border-gray-300 rounded-lg"></textarea>
          </div>
          
          <div class="flex space-x-3 pt-4">
            <button type="button" onclick="closeAddSpotModal()" class="flex-1 py-3 border border-gray-300 rounded-lg text-gray-700">取消</button>
            <button type="submit" class="flex-1 py-3 bg-blue-500 text-white rounded-lg">保存钓点</button>
          </div>
        </form>
      </div>
    </div>

    <script>
      // 钓点数据
      const fishingSpots = {
        1: {
          name: '西湖1号点',
          type: '湖泊',
          depth: '2.5米',
          fish: ['鲫鱼', '草鱼', '鲤鱼'],
          successRate: '92%',
          description: '水质清澈，水草丰富，是钓鲫鱼的绝佳位置。建议使用蚯蚓或玉米粒作饵。',
          bestTime: '早晨6-8点，傍晚5-7点',
          difficulty: '简单'
        },
        2: {
          name: '东岸钓台',
          type: '湖泊',
          depth: '3.2米',
          fish: ['黑鱼', '鲈鱼', '鲤鱼'],
          successRate: '78%',
          description: '深水区域，适合钓大型鱼类。推荐使用路亚钓法。',
          bestTime: '上午9-11点，下午3-5点',
          difficulty: '中等'
        },
        3: {
          name: '深水区',
          type: '湖泊',
          depth: '4.8米',
          fish: ['草鱼', '青鱼', '鲢鱼'],
          successRate: '85%',
          description: '湖中央深水区，大鱼较多但需要一定技巧。',
          bestTime: '全天候',
          difficulty: '困难'
        }
      };

      // 更新时间
      function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        });
        document.getElementById('current-time').textContent = timeString;
      }

      // 显示钓点信息
      function showSpotInfo(spotId) {
        const spot = fishingSpots[spotId];
        if (!spot) return;
        
        document.getElementById('spot-name').textContent = spot.name;
        document.getElementById('spot-content').innerHTML = `
          <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <div class="text-sm text-gray-600">钓点类型</div>
                <div class="font-medium">${spot.type}</div>
              </div>
              <div>
                <div class="text-sm text-gray-600">水深</div>
                <div class="font-medium">${spot.depth}</div>
              </div>
              <div>
                <div class="text-sm text-gray-600">成功率</div>
                <div class="font-medium text-green-600">${spot.successRate}</div>
              </div>
              <div>
                <div class="text-sm text-gray-600">难度</div>
                <div class="font-medium">${spot.difficulty}</div>
              </div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-2">常见鱼种</div>
              <div class="flex flex-wrap gap-2">
                ${spot.fish.map(fish => `<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">${fish}</span>`).join('')}
              </div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-2">最佳时段</div>
              <div class="text-sm">${spot.bestTime}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-2">钓点描述</div>
              <div class="text-sm">${spot.description}</div>
            </div>
          </div>
        `;
        
        document.getElementById('spotModal').classList.remove('hidden');
      }

      function closeSpotModal() {
        document.getElementById('spotModal').classList.add('hidden');
      }

      function addNewSpot() {
        document.getElementById('addSpotModal').classList.remove('hidden');
      }

      function closeAddSpotModal() {
        document.getElementById('addSpotModal').classList.add('hidden');
      }

      function showFishingIndexInfo() {
        alert('钓鱼指数基于天气、气压、风速、潮汐等因素综合计算，帮助您选择最佳钓鱼时机。');
      }

      function switchLocation() {
        const locations = ['杭州西湖', '千岛湖', '西溪湿地', '钱塘江'];
        const current = document.getElementById('current-location').textContent;
        const currentIndex = locations.indexOf(current);
        const nextIndex = (currentIndex + 1) % locations.length;
        document.getElementById('current-location').textContent = locations[nextIndex];
      }

      function navigateToSpot(spotId) {
        alert(`正在导航到钓点${spotId || ''}...`);
      }

      function zoomIn() {
        console.log('地图放大');
      }

      function zoomOut() {
        console.log('地图缩小');
      }

      function centerMap() {
        console.log('地图居中');
      }

      function toggleMapLayer() {
        console.log('切换地图图层');
      }

      function openSettings() {
        alert('打开设置页面');
      }

      function openMapPage() {
        alert('进入专门的地图页面');
      }

      function openNotifications() {
        alert('查看通知消息');
      }

      function openProfile() {
        alert('打开个人中心');
      }

      function editSpot() {
        closeSpotModal();
        addNewSpot();
      }

      updateTime();
      setInterval(updateTime, 60000);

      // 添加脉冲动画
      const style = document.createElement('style');
      style.textContent = `
        .pulse {
          animation: pulse 2s infinite;
        }
        @keyframes pulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.2); }
          100% { transform: scale(1); }
        }
      `;
      document.head.appendChild(style);

      // 模拟天气数据更新
      function updateWeatherData() {
        const weatherConditions = [
          { icon: 'fas fa-sun', desc: '晴朗', temp: '25°C' },
          { icon: 'fas fa-cloud', desc: '多云', temp: '23°C' },
          { icon: 'fas fa-cloud-rain', desc: '小雨', temp: '20°C' }
        ];
        
        // 这里可以连接真实的天气API
        console.log('更新天气数据');
      }

      // 定期更新天气数据
      setInterval(updateWeatherData, 300000); // 5分钟更新一次
    </script>
  </body>
</html> 